<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./lib/vant.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./lib/vue.js"></script>
    <script src="./lib/vant.js"></script>
    <!-- 引入axios（如果sendData是基于axios的） -->
    <script src="./lib/axios.js"></script>
    <style>
        header {
            margin-bottom: 30px;
        }

        form {
            padding-left: 10px;

            .van-radio {
                margin: 5px;
            }

            .teacher {
                margin-bottom: 20px;
            }
        }

        .btn {
            margin: 40px 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <van-nav-bar title="评分"></van-nav-bar>
        <header>
            <div style="font-size: 22px;font-weight: 550;margin:10px;">评分</div>
            <div style="font-size: 14px;margin: 10px;">感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！</div>
        </header>
        <van-form ref="formRef">
            <div class="teacher" v-for="(teacher, index) in teachers" :key="index">
                <p>{{index+1}}.{{ teacher.name }}
                    <span style="margin-left: 15px;font-size: 14px;font-weight: 550;">{{ teacher.position }}</span>
                </p>
                <van-radio-group v-model="teacher.rating" @change="checkExcellentCount" direction="horizontal">
                    <van-radio name="1">优秀</van-radio>
                    <van-radio name="2">合格</van-radio>
                    <van-radio name="3">基本合格</van-radio>
                    <van-radio name="4">不合格</van-radio>
                </van-radio-group>
            </div>
        </van-form>
        <div class="btn">
            <van-button type="info" size="large" @click="submit">提交</van-button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                teachers: [
                    { name: '张鹏宇', position: '党委委员、中文系党总支书记', rating: '' },
                    { name: '唐 鹏', position: '教育科学与技术系党总支副书记(主持工作)', rating: '' },
                    { name: '张焕平', position: '外语系党总支书记', rating: '' },
                    { name: '韩晋松', position: '音乐系党总支书记', rating: '' },
                    { name: '刘秀军', position: '机械系党总支书记', rating: '' },
                    { name: '潘玉峰', position: '旅游管理系党总支书记', rating: '' },
                    { name: '许红伟', position: '美术系党总支书记', rating: '' },
                    { name: '范国伟', position: '数学系党总支副书记(主持工作)', rating: '' },
                    { name: '曹晓红', position: '物理与电子工程系党总支书记', rating: '' },
                    { name: '刘 冷', position: '纪委委员、化学化工系党总支书记', rating: '' },
                    { name: '冯 杰', position: '生物科学与技术系党总支副书记(主持工作)', rating: '' },
                    { name: '郭晋丽', position: '信息技术与工程系党总支副书记(主持工作)', rating: '' },
                    { name: '李 光', position: '体育系党总支副书记(主持工作)', rating: '' },
                    { name: '冀里萃', position: '经济管理系党总支副书记(主持工作)', rating: '' },
                    { name: '李 剑', position: '材料科学与工程系党总支书记', rating: '' },
                    { name: '崔志勇', position: '文化产业系党总支副书记(主持工作)', rating: '' },
                    { name: '郭志刚', position: '马克思主义学院(筹)党总支副书记(主持工作)', rating: '' },
                ],
            }
        },

        methods: {
            checkExcellentCount(rating, teacherIndex) {
                let excellentCount = 0;
                let lastExcellentIndex = -1;
                this.teachers.forEach((teacher, index) => {
                    if (teacher.rating === '1') {
                        excellentCount++;
                        lastExcellentIndex = index; // 记录最后一个被选为优秀的索引
                    }
                })
                if (excellentCount > 3) {
                    this.$toast('优秀只能选3个,请重新选择');
                    // 重置最后一个被选为“优秀”的选项
                    if (lastExcellentIndex !== -1) {
                        this.$set(this.teachers, lastExcellentIndex, {
                            ...this.teachers[lastExcellentIndex],
                            rating: '' //这里我们设为空字符串
                        })
                    }
                }
            },
            submit() {
                this.teachers.forEach((item) => {
                    if (item.rating === '') {
                        this.$toast('您有老师未评分')
                    }
                })
            }
        },

    })
</script>

</html>